<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:300px;position: relative;margin: 30px auto;}
        .box .imgbox{width:1800px;position: absolute;left:0;top:0;}
        .box .imgbox img{width:300px;float: left;}

        .box input{position: absolute;width:20px;height:20px;font-size: 12px;top:35px;}
        .box input.left{left:0}
        .box input.right{right:0}
    </style>
</head>
<body>
    
    <div class="box">
        <div class="imgbox">
            <img src="./imgs/banner1.jpg" alt="">
            <img src="./imgs/banner2.jpg" alt="">
            <img src="./imgs/banner3.jpg" alt="">
            <img src="./imgs/banner4.jpg" alt="">
            <img src="./imgs/banner5.jpg" alt="">
            <img src="./imgs/banner1.jpg" alt="">
        </div>
        <div class="btns">
            <input type="button" class="left">
            <input type="button" class="right">
        </div>
    </div>

</body>
<script src="../move.js"></script>
<script>

    // 分析：轮播图：点击左右按钮，顺序切换图片

    // 布局：
        // 可视区域容器，大小只能容下一张图
        // 可视区域容器内，图片容器，定位，可以被移动
        // 图片容器内，所有图片排成一行
    // 逻辑
        // 选择器
        // 设置默认索引，根据默认索引设置容器的初始left
        // 绑定事件
        // 点击的是哪个按钮
        // 计算索引：左：--，右：++
        // 根据索引计算图片容器的left，设置回容器，实现切换图片的效果
    
    // 设计：给功能封装方法，给数据添加属性
    // 属性一般存在与类（构造函数）中，方法一般存在与接口规范（原型对象）上

    // function Banner(){
    //     选择器
    //     设置默认索引（默认显示哪张图）根据默认索引设置容器left
    //     绑定事件
    // }
    // Banner.prototype.addEvent = function(){
    //     触发事件
    //     ...
    //         改变索引
    //         this.changeIndex()
    // }
    // Banner.prototype.changeIndex = function(){
    //     ...
    //     改变图片容器位置
    //     this.changeLeft()
    // }
    // Banner.prototype.changeLeft = function(){
    //     ...
    // }
    // new Banner();


    // 编程
    function Banner(){
        // 选择器
        this.left = document.querySelector(".left");
        this.right = document.querySelector(".right");
        this.imgbox = document.querySelector(".imgbox");
        this.imgs = this.imgbox.children;

        // 设置默认索引（默认显示哪张图）根据默认索引设置容器left
        this.index = 0;

        this.imgbox.style.left = -this.index * this.imgs[0].offsetWidth + "px";

        // 绑定事件
        this.addEvent();
    }
    Banner.prototype.addEvent = function(){
        const that = this;
        // 事件
        this.left.onclick = function(){
            // 改变索引
            // this.changeIndex(0)
        }
        this.right.onclick = function(){
            // 改变索引
            that.changeIndex()
        }
    }
    Banner.prototype.changeIndex = function(){
        if(this.index === this.imgs.length-1){
            this.imgbox.style.left = 0;
            this.index = 1;
        }else{
            this.index++;
        }
        // 改变图片容器位置
        this.changeLeft()
    }
    Banner.prototype.changeLeft = function(){
        move( this.imgbox, {
            left: -this.index * this.imgs[0].offsetWidth
        } )
    }
    new Banner();

    // 正常依次下一张的变化
    // 当前值：-300，目标值：-600
    // 当前值比目标大，动画方向，从右向左走


    // 最后一张图到第一张图的变化
    // 当前值：-1200，目标值：0
    // 目标比当前值大，动画方向，从左向右走

    // 最后一张图到第一张图的变化：第一步修改
    // 复制第一张图，放在所有图片之后
    // 当前值：-1200，目标值：-1500
    // 当前值比目标大，动画方向，从右向左走

    // 最后一张图到第一张图的变化：第二步修改
    // 修改终点索引之后的索引为1
    // 当前值：-1500，目标值：-300
    // 目标比当前值大，动画方向，从左向右走

    // 最后一张图到第一张图的变化：第三步修改
    // 当当前值为-1500时，不使用动画，立即设置left为0
    // 当前值：0，目标值：-300
    // 当前值比目标大，动画方向，从右向左走
    
</script>
</html>